<?php
    echo $this->Html->script('bootstrap-modal.js');
    echo $this->Html->script('jquery-validate.js');
?>
<body>
    <div class="container">
        <nav class="barra-secundaria">
            <ul class="nav nav-tabs">
                <li class="">
                    <a href="<?php echo $this->Html->Url(array('controller' => 'Usuarios', 'action' => 'index')); ?>">Usuarios</a>
                </li>
                <li>
                    <a href="<?php echo $this->Html->Url(array('controller' => 'Usuarios', 'action' => 'tipos')); ?>">Perfiles</a>
                </li>
                <li><a href="#">Permisos</a></li>
            </ul>
        </nav>
        <div class="bs-docs-example">
            <table class="table table-striped" id="tabla-permisos">
                <button class="btn btn-success agregar-modal" type="button" data-toggle="modal">
                    Agregar
                </button>
                <thead>
                    <tr>
                        <th>id</th>
                        <th>Nombre</th>
                        <th>Descripcion</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($permisos as $p) { ?>
                        <tr>
                            <td><?php echo $p['p']['id']; ?></td>
                            <td><?php echo $p['p']['nombre']; ?></td>
                            <td><?php echo $p['p']['descripcion']; ?></td>
                            <td>
                                <button class="btn btn-small btn-primary modificar-modal" type="button" data-toggle="modal">
                                    Modificar
                                </button>
                                <button class="btn btn-small btn-danger eliminar-modal" type="button" data-toggle="modal">
                                    Eliminar
                                </button>
                            </td>
                        </tr>
                    <?php } ?>
                </tbody>
                
            </table>
            <div id="dialogo-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="myModalLabel"></h3>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="control-group">
                            <label class="control-label" for="usuario">Nombre</label>
                            <div class="controls">
                                <input type="text" id="nombre">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="clave">Descripcion</label>
                            <div class="controls">
                                <input type="text" id="descripcion">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
                    <button class="btn agregar-registro" id="boton-aceptar"></button>
                </div>
            </div>
        </div>
    </div>           
</body>
<script type="text/javascript">
    var rutaModificar = "<?php echo $this->Html->Url(array('controller' => 'Usuarios', 'action' => 'modificarPermiso')); ?>";
    var rutaEliminar = "<?php echo $this->Html->Url(array('controller' => 'Usuarios', 'action' => 'eliminarPermiso')); ?>";
    var rutaAgregar = "<?php echo $this->Html->Url(array('controller' => 'Usuarios', 'action' => 'agregarPermiso')); ?>";
    var dialogo = $(document).find('#dialogo-modal');
    var datos,renglon;
    
    $(function() {
       $('.modificar-modal').click(function() {
           click_modi($(this));
       });
       $('.eliminar-modal').click(function() {
          click_eli($(this));
       });
       $('.agregar-modal').click(function() {
           click_agre();
       });
       $('#boton-aceptar').click(function() {
           dialogo.modal('hide');   
           if($(this).text()=='Agregar'){
               datos = new Array();
               datos[1] = dialogo.find('#nombre').val();
               datos[2] = dialogo.find('#descripcion').val();
               $.post(rutaAgregar,{datos : datos},agregar);
           }
           if($(this).text()=='Eliminar'){
               $.post(rutaEliminar,{datos : datos},eliminar);
           }
           if($(this).text()=='Guardar'){
//               datos = new Array(); 
               datos[1] = dialogo.find('#nombre').val();
               datos[2] = dialogo.find('#descripcion').val();
               $.post(rutaModificar,{datos : datos},modificar);
           }
       });
    });
   function click_eli(e){
        renglon = e.parent().parent();
        datos = new Array(renglon.find('td').eq(0).text(),
                         renglon.find('td').eq(1).text(),
                         renglon.find('td').eq(2).text());
        dialogo.find('#myModalLabel').text("¿Eliminar registro \" "+datos[0]+" \"?");
        dialogo.find('#nombre').val(datos[1]);
        dialogo.find('#descripcion').val(datos[2]);
        dialogo.find('#boton-aceptar').text('Eliminar');
        dialogo.modal('show');
   }
   function click_modi(e){
        renglon = e.parent().parent();
        datos = new Array(renglon.find('td').eq(0).text(),
                         renglon.find('td').eq(1).text(),
                         renglon.find('td').eq(2).text());
        dialogo.find('#myModalLabel').text("Modificar registro \" "+datos[0]+" \"");
        dialogo.find('#nombre').val(datos[1]);
        dialogo.find('#descripcion').val(datos[2]);
        dialogo.find('#boton-aceptar').text('Guardar');
        dialogo.modal('show');
   }
   function click_agre(){
        dialogo.find('#myModalLabel').text("Agregar registro");
        dialogo.find('#nombre').val('');
        dialogo.find('#descripcion').val('');
        dialogo.find('#boton-aceptar').text('Agregar');
        dialogo.modal('show');
   }
   function modificar(user) {
       renglon.find('td').eq(1).text(user['nombre']);
       renglon.find('td').eq(2).text(user['descripcion']);
    }
    function eliminar() {
       renglon.remove();
    }
    function agregar(permiso) {
        var elemento = $('#tabla-permisos tr:last');
        elemento.after("<tr></tr>");
        elemento = $('#tabla-permisos tr:last');
        elemento.append("<td></td><td></td><td></td><td></td>");
        elemento.find('td').eq(0).text(permiso['id']);
        elemento.find('td').eq(1).text(permiso['nombre']);
        elemento.find('td').eq(2).text(permiso['descripcion']); 
        elemento = $('#tabla-permisos tr:last td:last');
        elemento.append("<button class=\"btn btn-small btn-primary modificar-modal\" type=\"button\" data-toggle=\"modal\">\n\
                            Modificar\n\
                         </button>\n\
                         <button class=\"btn btn-small btn-danger eliminar-modal\" type=\"button\" data-toggle=\"modal\">\n\
                            Eliminar\n\n\
                         </button>");
        var botonmodificar = elemento.find('.modificar-modal');
        var botoneliminar  = elemento.find('.eliminar-modal');
        botoneliminar.click(function(){
            click_eli($(this));
        });
        botonmodificar.click(function(){
            click_modi($(this));
        });   
    }
</script>
